<template>
	<view>
		<shopro-share v-model="showShare" :shareDetail="shareInfo" posterType="user"></shopro-share>
		<userinfo-card :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
		<image :src="img + dd.image" mode="aspectFill" lazy-load class="w750 h384"></image>
		<view class="padding flex flex-direction">
			<text class="f-18 text-bold" style="line-height: 50rpx;">{{ dd.title }}</text>
			<view class="flex align-center padding-tb">
				<text class="text-price f36 text-bold text-red margin-right-xs ">{{ dd.price }}</text>
				<text class="f24" style="color: #999999; text-decoration: line-through;">
					原价:￥{{ dd.discount_price }}
				</text>
			</view>
			<view class="r20 padding flex flex-direction" style="background: #F6F5FA;">
				<view class="flex  flex-direction">
					<view class="flex align-center f24" style="color: #333333;">
						<text class="cuIcon-time margin-right-xs"></text>
						<text>时间：2021.08.23 12:00-18:00</text>
					</view>
					<view class="flex align-center f24 mt25" style="color: #333333;">
						<text class="cuIcon-location margin-right-xs"></text>
						<text>地址：{{ dd.address }}</text>
					</view>
					<view class="flex align-center f24 mt25" style="color: #333333;">
						<text class="cuIcon-friend margin-right-xs"></text>
						<text>人数：{{ dd.join_count }}</text>
					</view>
					<!-- join_count -->
				</view>
			</view>
			<!-- <view class="padding-tb f30 text-bold"><text>活动嘉宾</text></view>
			<scroll-view scroll-x="true" style="height: 140rpx">
				<view class="flex">
					<view class="w282 mr25" v-for="(item, index) in 6" :key="index">
						<view class="w282 h138 r10 flex align-center justify-start mr25" style="background: #F5F2EC;">
							<image src="https://picsum.photos/94/94" mode="aspectFill" lazy-load class="w94 h94 r6 margin-lr-sm"></image>
							<text class="f28">菊次郎</text>
						</view>
					</view>
				</view>
			</scroll-view> -->
		</view>
		<view class="padding">
			<text class="f30 text-bold">活动介绍</text>
			<view class="f28" style="color: #333333;">
				<text>{{ dd.content }}</text>
			</view>
		</view>
		<view class="w750 h20" style="background:#F6F5FA ;"></view>
		<view class="padding">
			<text class="f30 text-bold">活动简要</text>
			<view class="f28" style="color: #333333;">
				<text>{{ dd.short_content }}</text>
			</view>
		</view>

		<view class="h150"></view>
		<view class="flex justify-between padding-lr fixd h100 ww100">
			<button
				class="btn cu-btn flex justify-center align-center"
				:style="{ background: color ? '#999' : '' }"
				@click="registerNow"
			>
				{{ signingUp(dd.start_time, dd.end_time) }}
			</button>
			<button class="btn1 cu-btn flex justify-center align-center" @click="onShare">
				<text class="cuIcon-share margin-right-xs"></text>
				分享
			</button>
		</view>
	</view>
</template>

<script>
import share from '@/shopro/share';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			dd: {},
			img: 'https://guoxue.qianjiwl.xyz',
			scrollTop: 0,
			showShare: false,
			name: '',
			color: true
		};
	},
	onLoad(option) {
		this.dd = uni.getStorageSync('content');
		this.signingUp();
		console.log('this.dd :>> ', this.dd);
		uni.setNavigationBarColor({
			backgroundColor: '#8F3333',
			frontColor: '#FFFFFF'
		});
	},
	computed: {
		...mapState({
			shop: ({ shopro }) => shopro.config?.shop, // 版本信息
			userTemplate: ({ shopro }) => shopro.template?.user, //模板数据
			userInfo: ({ user }) => user.userInfo,
			isLogin: ({ user }) => user.isLogin,
			authType: ({ user }) => user.authType
		}),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		},

		//分类选项卡数据
		categoryTabsData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[this.userTemplate.length - 1].content;
			}
		}
	},
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.shareInfo = share.setShareInfo();
			this.showShare = true;
		},
		async registerNow() {
			if (this.color) {
				const res = await this.$http('common.participate', { payment: 'wechat', activity_id: this.dd.id });
				console.log('res :>> ', res);
				if (!res.code) return ;
				const  data = res.data.pay_data
				uni.requestPayment({
					provider: data.provider,
					timeStamp:data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: res => {
						console.log('success:' + JSON.stringify(res));
						this.$tools.toast('支付成功~~')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
					},
				});
			}
		},
		signingUp(e, e1) {
			console.log('e :>> ', e);
			console.log('e1 :>> ', e1);
			console.log('Math.round(new Date() / 1000) :>> ', Math.round(new Date() / 1000));
			// var e = this.dd.start_time
			// var e1 = this.dd.end_time
			var time = Math.round(new Date() / 1000);
			if (e < time &&  time <  e1) {
				this.color = true;
				return '活动中';
			}
			if (time < e) {
				this.color = false;
				return '立即报名';
			}
			if (time > e1) {
				this.color = true;
				return '已结束';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/page {
	background: #ffffff !important;
}
.btn1 {
	width: 240rpx;

	background: #b76262;
}
.btn {
	width: 430rpx;

	background: #8f3333;
}
.fixd {
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom) / 2);
	left: 50%;
	transform: translateX(-50%);
}
.btn,
.btn1 {
	border-radius: 10rpx;
	height: 100rpx;

	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
</style>
